<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>播放详情</title>
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/list.css">
    <style>
        .apl {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #fff; /* 设置背景颜色，如果需要的话 */
            /* 其他样式属性，例如 padding、border 等 */
        }
    </style>
</head>
<body>
    <div id="nav" class="w-75 m-auto"></div>
    <div class="songDetailApp" style="width: 75%;margin: auto;" id="songDetailApp">
        <div class="container-fluid mt-5 pb-lg-5">
            <div class="row">
                <div class="col-md-6">
                    <div class="w-50 ml-5">
                        <div><h4>{{song.mname}}</h4></div>
                        <img :src="'/music_platform'+song.pic" class="img-fluid" alt="..." style="width: 500px;height: 250px">
                        <span v-if="favoriteStatus===false">
                            <el-button type="primary" @click="preFavoriteSong" size="small">收藏</el-button>
                            <el-dialog title="收藏"
                                       :visible.sync="dialogFormVisible"
                                       width="50%">
                                <template>
                                  <el-tabs v-model="activeName">
                                    <el-tab-pane label="选择歌单" name="first">
                                      <el-select v-model="playListChosed" filterable placeholder="请选择">
                                        <el-option
                                                v-for="(item,index) in userPlayList"
                                                :key="index"
                                                :label="item.plname"
                                                :value="item.plid">
                                        </el-option>
                                      </el-select>
                                        <el-button key="btn1" size="small" @click="dialogFormVisible = false">取 消</el-button>
                                        <el-button key="btn2" type="primary"  size="small" @click="addFavorite">确 认</el-button>
                                    </el-tab-pane>
                                    <el-tab-pane label="创建新歌单" name="second">
                                        <el-input placeholder="请输入歌单名" v-model="UserCreatePlayListName"></el-input>
                                        <el-button key="btn3" size="small" @click="dialogFormVisible = false">取 消</el-button>
                                        <el-button v-if="UserCreatePlayListName!==''" key="btn4" type="primary"  size="small" @click="addFavoriteToNew">确 认</el-button>
                                    </el-tab-pane>
                                  </el-tabs>
                                </template>
                            </el-dialog>
                        </span>
                        <span v-else>
                            <el-button slot="reference" size="small" @click="unfavorite">已收藏</el-button>
                        </span>
                        <span>
                            <a :href="'/music_platform/download?id='+song.mid" class="song-info">
                                <i class="fas fa-download"></i>
                            </a>
                        </span>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="media">
                            <img :src="'/music_platform'+singer.pic" class="mr-3" alt="..." style="height: 100px;width: 100px">
                            <div class="media-body">
                                <a :href="'/music_platform/pages/singer_detail.html?sid='+singer.sid" style="text-decoration: none">
                                    <h5 class="mt-0">{{singer.sname}}</h5>
                                </a>
                                <p>{{singer.desc}}</p>
                            </div>
                    </div>
                </div>
            </div>
            <div class="progress mt-2">
                <div class="progress-bar bg-warning" role="progressbar" style="width: 100%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <div class="row mt-2">
                <div class="col-md-8">
                    <div><h5>共有{{commentNum}}条评论</h5></div>
                    <br>
                    <ul class="list-unstyled">
                        <li class="media mt-2" v-for="(item,index) in comments">
                            <div class="media-body">
                                <h7 class="mt-0 mb-1">{{item.userInfo.username}}</h7>
                                <p>{{item.text}}</p>
                                <span>
                                    <el-button v-if="userPlayList[0]!==-1" size="small" @click="drawer = true;changeCommentTo(item)" type="primary" style="margin-left: 16px;">
                                        评价
                                    </el-button>
<!--                                    <a href="#" class="ml-5"><i class="fa-regular fa-thumbs-up" style="color: #f25493;"></i></a>-->
                                    <div v-show="item.comments.length ===0 "><el-divider></el-divider></div>
                                    <ul class="list-group">
                                      <li class="list-group-item" v-for="childComment in item.comments">
                                          <h7 class="mt-0 mb-1">{{childComment.userInfo.username}}</h7>
                                          <p>{{childComment.text}}</p>
                                          <el-divider></el-divider>
                                      </li>
                                    </ul>
                                </span>
                            </div>
                        </li>
                    </ul>
                    <el-drawer
                            :title="'回复'+commentTo.userInfo.username"
                            :visible.sync="drawer"
                            direction="rtl">
                        <el-input
                                type="textarea"
                                :rows="10"
                                placeholder="请输入内容"
                                v-model="commentText">
                        </el-input>
                        <el-row>
                            <el-col :offset="10"><el-button :disabled="commentText==''" type="primary" round @click="commentToUserSub">发布</el-button></el-col>
                        </el-row>
                    </el-drawer>
                </div>
                <div class="col-md-4">
                    <div><h5>包含这首歌的歌单</h5></div>
                    <ul class="list-group" style="margin-top: 20px">
                        <li class="list-group-item" v-for="item in playList">
                            <a :href="'/music_platform/pages/playList_detail.html?plid='+item.plid">
                                <img :src="'/music_platform'+item.pic" class="img-thumbnail" alt="..." style="width: 100px;height: 100px">
                                <span>
                                    <div><h7 class="text-primary">{{item.plname}}</h7></div>
                                    <div><h7 class="text-dark">{{item.desc}}</h7></div>
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div style="display: flex; position: sticky; bottom: 30%;">
                <div style="flex: 1; text-align: right;">
                    <el-button v-if="userPlayList[0]!==-1" type="primary" @click="commentVisible=true">说点什么吧</el-button>
                </div>
            </div>
        </div>
        <div>
            <el-dialog :title="song.mname" :visible.sync="commentVisible">
                <el-input
                        type="textarea"
                        :rows="10"
                        placeholder="说点什么吧"
                        v-model="commentText">
                </el-input>
                <el-row>
                    <el-col :offset="10"><el-button :disabled="commentText==''" type="primary" round @click="commentToSongSub">发布</el-button></el-col>
                </el-row>
            </el-dialog>
        </div>
        <div class="apl">
            <aplayer autoplay
                     :music="{
                title: this.audio.title,
                artist: this.audio.artist,
                src: this.audio.src,
                pic: this.audio.pic,
                lrc: this.audio.lrc
            }" :float="true" :showLrc="true" :mutex="true" :listMaxHeight="'60px'":listFolded="true"
                     :list=this.list     />
        </div>

        <button @click="togglePlaylist" class="list-toggle-button">播放列表</button>
        <div @mouseleave="listOut" class="list-playlist-container" :class="{ 'show-playlist': isPlaylistOpen }">
            <!-- 清空按钮 -->
            <button @click="clearPlaylist" class="clear-playlist-button">一键清空</button>

            <!-- 播放列表信息 -->
            <div class="playlist-info">
                <p>播放列表信息:</p>
                <p>歌曲数量: {{ list.length }}</p>
                <!-- 可以添加其他相关信息 -->
            </div>
            <!-- 歌曲列表 -->
            <div class="list-song-list">
                <!-- 歌曲条目 -->
                <div v-for="(song,index) in list" :key="song.id" class="list-song-item">
                    <div class="list-song-info">
                        <strong class="song-info">{{ index + 1 }}. {{ song.title }} - {{ song.artist }}</strong>
                    </div>
                    <div class="list-delete-button" @click="removeSong(song.id)">删除</div>
                </div>
            </div>
        </div>

    </div>


    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/foot.js"></script>
    <script src="js/newnav.js"></script>
    <script src="js/vue.js"></script>
    <!-- 引入 Vue-APlayer -->
    <script src="//cdn.jsdelivr.net/npm/vue-aplayer"></script>
    <script src="js/axios.js"></script>
    <script src="js/getParameter.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        let app = new Vue({
            el:"#songDetailApp",
            data:{
                repeat:'repeat-all',//'repeat-one'（单曲循环）、'repeat-all'（列表循环）或者'no-repeat'（不循环）
                song:{},
                comments:[],
                singer:{},
                drawer: false,
                commentNum:0,
                playList:[],
                commentText: '',
                favoriteStatus:false,
                followStatus:false,
                audio: {
                    title:'无歌曲',
                    artist: '无歌曲',
                    src: '',
                    pic: '/music_platform/img/R-C.png',
                    lrc:''
                },
                list:[],
                isPlaylistOpen: false,
                activeName: 'first',
                dialogFormVisible: false,
                commentVisible:false,
                userPlayList:[-1],
                playListChosed:1,
                UserCreatePlayListName:'',
                commentTo:{
                    userInfo:{
                        username:'',
                        uid:''
                    }
                },
            },
            methods:{
                async loadSong (){
                    let mid = getParameter("mid");
                    let _this = this;
                    await axios.get("/music_platform/singleSong/"+mid).then(function (response){
                        _this.song = response.data.data
                        _this.singer = response.data.data.singer
                        _this.comments = response.data.data.comments
                        _this.audio.title = response.data.data.mname;
                        _this.audio.artist = response.data.data.singer.sname;
                        _this.audio.pic = "/music_platform"+response.data.data.pic;
                        _this.audio.lrc = response.data.data.lyc;
                        _this.audio.src = "/music_platform"+response.data.data.source;
                    })
                    this.addAudio();
                },
                loadPlayList:function (){
                    let mid = getParameter("mid");
                    let _this = this;
                    axios.get("/music_platform/playlist/findByMid",{
                        params: {
                            mid:mid,
                            pageNum:1,
                            pageSize: 5,
                        }
                    }).then(function (response){
                        _this.playList=response.data.data.list;
                    })
                },
                loadCommentNum:function (){
                    let mid = getParameter("mid");
                    let _this = this;
                    axios.get("/music_platform/comment/countByMid",{
                        params:{
                            mid:mid
                        }
                    }).then(function (response){
                        _this.commentNum = response.data.data;
                    })
                },
                isFavorite:function (){
                    let mid = getParameter("mid");
                    let _this = this;
                    axios.get("/music_platform/singleSong/isFavorite",{
                        params:{
                            mid:mid
                        }
                    }).then(function (response){
                        _this.favoriteStatus = response.data.flag;
                    })
                },
                // loadSetAudio:function (){
                //     // this.audio[0].name = this.song.mname;
                //     // this.audio[0].artist = this.song.singer.sname;
                //     // this.audio[0].cover = "/music_platform"+this.song.pic;
                //     // this.audio[0].lyc = this.song.lyc;
                //     // this.audio[0].url = this.song.source;
                //     let _this = this;
                //     axios.get("/music_platform/singleSong/getAudio").then(function (response){
                //         _this.audio = response.data.data;
                //     })
                // },
                loadPlayer:function (){
                    const ap = new APlayer({
                        container: document.getElementById("aplayer"),
                        // 音乐信息
                        audio: this.audio,
                        // 其他配置信息
                        ...this.info,
                    });
                },
                loadUserHasPlayList:function (){
                    let _this = this;
                    axios.get("/music_platform/playlist/findByUid").then(function (response){
                        if (response.data.flag == true){
                            _this.userPlayList = response.data.data;
                        }
                    })
                },
                unfavorite:function (){
                    let mid = getParameter("mid");
                    let _this = this;
                    axios.get("/music_platform/playlist/unFavorite",{
                        params:{
                            mid:mid
                        }
                    }).then(function (response){
                        _this.isFavorite();
                        _this.loadPlayList();
                    })
                },
                addFavorite:function (){
                    let mid = getParameter("mid");
                    let _this = this;
                    axios.get("/music_platform/playlist/addFavorite",{
                        params:{
                            mid:mid,
                            plid:_this.playListChosed
                        }
                    }).then(function (response){
                        _this.isFavorite();
                        _this.loadPlayList();
                        _this.dialogFormVisible = false
                    })
                },
                addFavoriteToNew:function (){
                    let mid = getParameter("mid");
                    let _this = this;
                    axios.get("/music_platform/playlist/addFavoriteToNew",{
                        params:{
                            mid:mid,
                            plname:_this.UserCreatePlayListName
                        }
                    }).then(function (response){
                        _this.isFavorite();
                        _this.loadUserHasPlayList();
                        _this.loadPlayList();
                        _this.dialogFormVisible = false
                    })
                },
                commentToUserSub:function (){
                    let mid = getParameter("mid");
                    let _this = this;
                    axios.get("/music_platform/comment/addComment",{
                        params:{
                            mid:mid,
                            cid:_this.commentTo.cid,
                            commentText:_this.commentText,
                        }
                    }).then(function (response){
                        _this.loadSong();
                        _this.loadCommentNum();
                        _this.drawer = false;
                    })
                },
                commentToSongSub:function (){
                    let mid = getParameter("mid");
                    let _this = this;
                    axios.get("/music_platform/comment/addComment",{
                        params:{
                            mid:mid,
                            cid:'',
                            commentText:_this.commentText,
                        }
                    }).then(function (response){
                        _this.loadSong();
                        _this.loadCommentNum();
                        _this.commentVisible=false;
                    })
                },
                changeCommentTo:function (val){
                    this.commentTo = val;
                },
                preFavoriteSong:function (val){
                    if (this.userPlayList[0]===-1){
                        location.href = "/music_platform/pages/login.html"
                    }else {
                        this.dialogFormVisible = true;
                    }
                },
                addAudio(){
                    if (!this.list.some(item => item.title === this.audio.title &&
                        item.artist === this.audio.artist)){
                        const audioCopy = { ...this.audio };
                        this.list.push(audioCopy);
                        // 更新数据后将数据保存到localStorage
                        localStorage.setItem('myList', JSON.stringify(this.list));
                    }
                },
                removeSong(index) {
                    // 在这里实现删除歌曲的逻辑
                    this.list.splice(index, 1);
                    localStorage.setItem('myList', JSON.stringify(this.list));
                },
                togglePlaylist() {
                    this.isPlaylistOpen = !this.isPlaylistOpen;
                },
                listOut(){
                    this.isPlaylistOpen = false;
                },
                clearPlaylist(){
                    this.list = []
                }
            },
            created:function (){
                this.loadSong();
                this.loadCommentNum();
                this.loadPlayList();
                this.isFavorite();
                this.loadUserHasPlayList();
                // this.loadSetAudio();
            },
            mounted:function (){
                // this.loadPlayer();
                // 在Vue实例初始化后，尝试从localStorage获取数据
                var storedList = localStorage.getItem('myList');
                if (storedList) {
                    // 如果本地存储中有数据，将其解析并赋值给Vue的数据
                    this.list = JSON.parse(storedList);
                }
            },
            components: {
                Aplayer: window.VueAPlayer  // 注册Vue-APlayer组件
            },
            beforeDestroy() {
                localStorage.setItem('myList', JSON.stringify(this.list));
            }
        })
    </script>
</body>
</html>